<template>
    <view v-if="list && list.length > 0" class="nova-flowlayout">
        <view class="child-wrapper" v-for="(item, index) in list" :key="index" @click="_onClick(item, index)">
            <slot :item="item" :index="index" :checked="_checked(item)"></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'nova-flowlayout',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        values: {
            type: Array,
            default: () => []
        },
        max: {
            type: Number,
            default: -1
        },
        column: {
            type: Number,
            default: -1
        },
        itemStyle: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            selections: [],
            count: 0
        };
    },
    onReady() {
        this.values.map(e => {
            this.selections.push(e);
        });
        console.log(this.selections, typeof this.selections);
    },
    methods: {
        _checked(item) {
            let check = this.selections.indexOf(item) >= 0;
            console.log(item, ' checked ', check);
            return check;
        },
        _onClick(item, index) {
            if (this.max != 0) {
                if (this.max == 1) {
                    if (this.selections.length > 0) {
                        this.selections.length = 0;
                    }
                    this.selections.push(item);
                } else if (this.max > 1) {
                    if (this.selections.length >= this.max) {
                    } else {
                        this.selections.push(item);
                    }
                }
                let e = {
                    detail: {
                        count: this.count,
                        index: index,
                        current: item
                    }
                };
                this.$emit('checkChanged', e);
            }
            console.log(item);
        }
    }
};
</script>

<style lang="scss">
.nova-flowlayout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .child-wrapper {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;

        &:not(:last-child) {
            margin-right: 20rpx;
        }
    }
}
</style>
